<!doctype html>
<html>
  <head>
    <title>xterm.js demo</title>
    <!--
      WARNING: This demo is a barebones implementation designed for development and evaluation
      purposes only. It is definitely NOT production ready and does not aim to be so. Exposing the
      demo to the public as is would introduce security risks for the host.
    -->
    <link rel="shortcut icon" type="image/png" href="/logo.png">
    <link rel="stylesheet" href="/xterm.css" />
    <link rel="stylesheet" href="/style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
  </head>
  <body>
    <h1 style="color: #2D2E2C">xterm.js: A terminal for the <em style="color: #5DA5D5">web</em></h1>
    <div id="terminal-container"></div>
    <div>
      <h3>Options</h3>
      <p>These options can be set in the <code>Terminal</code> constructor or by using the <code>Terminal.setOption</code> function.</p>
      <div id="options-container"></div>
    </div>
    <div>
      <h3>Addons</h3>
      <p>Addons can be loaded and unloaded on a particular terminal to extend its functionality.</p>
      <div id="addons-container"></div>
      <h3>Addons Control</h3>
      <h4>SearchAddon</h4>
      <p>
        <label>Find next <input id="find-next"/></label>
        <label>Find previous <input id="find-previous"/></label>
        <label>Use regex<input type="checkbox" id="regex"/></label>
        <label>Case sensitive<input type="checkbox" id="case-sensitive"/></label>
        <label>Whole word<input type="checkbox" id="whole-word"/></label>
      </p>
      <h4>SerializeAddon</h4>
      <p>
        <button id="serialize">Serialize the content of terminal</button>
        <label><input type="checkbox" id="write-to-terminal">Write back to terminal</label>
        <div><pre id="serialize-output"></pre></div>
      </p>
    </div>
    <div>
      <h3>Style</h3>
      <div style="display: inline-block; margin-right: 16px;">
        <label for="padding">Padding</label>
        <input type="number" id="padding" />
      </div>
    </div>
    <hr/>
    <button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button>
    <script src="dist/client-bundle.js" defer ></script>
  </body>
</html>
